import React, { useEffect, useState } from 'react';
import { Form, Select, Button, Input, Table, Space } from "antd";
import type { ColumnsType } from 'antd/es/table';
import * as servivce from '../../api/studentManagement.js'
import { Link } from 'react-router-dom';
import style from './index.module.css';
import service from '../../utils/service'



interface DataType {
    key: string;
    name: string;
    num: number;
    grand: string;
    class: string;
    sex: string;
    nation: string;
    name1: string;
    phone1: number;
}

function StudentManagement() {
    // 数据的状态
    const [studentdatas, setStudentdatas] = useState([]);
    const [arrNum, setArrNum] = useState(0)
    // 函数式组件发请求：需要使用到Hooks中的钩子
    // useEffect()
    useEffect(() => {
        servivce.student_demo().then((res) => {
            console.log(res.data)
            // 把拿到的数据设置给studentdatas的状态
            setStudentdatas(res.data)
            // 总计几条数据
            setArrNum(res.data.length)
        })
    }, [])
    //删除
    const del = (id: any) => {
        console.log(id);
        console.log(id.id);
        service({
            url: `/studentdata/${id.id}`,
            method: 'DELETE'
        }).then(res => {
            console.log('555');
            alert('删除成功')
            servivce.student_demo().then((res) => {
                console.log(res.data)
                // 把拿到的数据设置给studentdatas的状态
                setStudentdatas(res.data)
                // 总计几条数据
                setArrNum(res.data.length)
            })

        })



    }



    const columns: ColumnsType<DataType> = [
        {
            title: '学生姓名',
            dataIndex: 'name',
            key: 'name',

        },
        {
            title: '学籍号',
            dataIndex: 'num',
            key: 'num',
        },
        {
            title: '年级',
            dataIndex: 'grand',
            key: 'grand',
        }, {
            title: '班级',
            dataIndex: 'class',
            key: 'class',
        },
        {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
        },
        {
            title: '民族',
            key: 'nation',
            dataIndex: 'nation',

        },
        {
            title: '监护人姓名',
            key: 'name1',
            dataIndex: 'name1',

        },
        {
            title: '监护人手机号',
            key: 'phone1',
            dataIndex: 'phone1',

        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Link to={{ pathname: '/Main/StudentManagEditor', state: { id: record } }}>编辑</Link>
                    <a onClick={() => { del(record) }} >删除</a>
                </Space >
            ),
        },
    ];
    const data: DataType[] = studentdatas

    return (
        <div style={{ backgroundColor: "#EEE" }}>
            <div className='bigbox'>
                <div className='header'>
                    <h1 style={{ backgroundColor: "#dedede", height: '50px', lineHeight: '50px', color: 'blue', fontSize: '18px', textIndent: '1em' }}>学生管理</h1>
                </div>
                <div className={style.formBox}>
                    <Form
                        name="basic"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        style={{ maxWidth: 600, display: 'flex' }}
                        initialValues={{ remember: true }}
                        autoComplete="off"
                    >
                        <Form.Item
                            name="username"
                            rules={[{ required: true, message: 'Please input your username!' }]}
                        >
                            <Input placeholder='班主任姓名/班主任手机号' style={{ width: '200px', margin: '10px  20px ' }} />
                        </Form.Item>

                        <Form.Item name="grade" >
                            <Select
                                defaultValue="年级"
                                style={{ width: 120, margin: '10px 20px' }}
                                options={[
                                    { value: '全部', label: '全部' },
                                    { value: '一年级', label: '一年级' },
                                    { value: '二年级', label: '二年级' },
                                    { value: '三年级', label: '三年级' },
                                    { value: '四年级', label: '四年级' },
                                    { value: '五年级', label: '五年级' },
                                    { value: '六年级', label: '六年级' },
                                ]}>
                            </Select>
                        </Form.Item>
                        <Form.Item name="class" >
                            <Select
                                defaultValue="班级"
                                style={{ width: 120, margin: '10px 20px' }}
                                options={[
                                    { value: '全部', label: '全部' },
                                    { value: '1班', label: '1班' },
                                    { value: '2班', label: '2班' },
                                    { value: '3班', label: '3班' },
                                    { value: '4班', label: '4班' },
                                    { value: '5班', label: '5班' },
                                    { value: '6班', label: '6班' },
                                ]}>
                            </Select>
                        </Form.Item>
                        <Form.Item name="class" >
                            <Select
                                defaultValue="性别"
                                style={{ width: 120, margin: '10px 20px' }}
                                options={[

                                    { value: '全部', label: '全部' },
                                    { value: '男', label: '男' },
                                    { value: '女', label: '女' },

                                ]}>
                            </Select>
                        </Form.Item>

                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button type="primary" htmlType="submit" style={{ marginTop: '10px' }}>
                                查询
                            </Button>
                        </Form.Item>
                    </Form>
                    <Button style={{ marginLeft: '250px', marginTop: '10px' }} >重置</Button>
                </div>
                <div>
                    <Button type="primary" style={{ margin: '20px 20px' }}>  <Link to="/Main/addStudent" >新增学生</Link>        </Button>
                    <Button>导入</Button>
                    <Button style={{ marginLeft: '20px' }}>导出</Button>
                </div>
                <div style={{ border: '1px solid #bae7ff', backgroundColor: '#e6f7ff', height: '50px', lineHeight: '50px', borderRadius: '5px', marginTop: '20px', textIndent: '2em' }}>
                    查询结果：共计{arrNum}条数据
                </div>
                <div>
                    <Table columns={columns} dataSource={data} bordered={true} />

                </div>

            </div>
        </div>
    )
}


export default StudentManagement;

